<template>
  <el-select v-model="_value" multiple filterable default-first-option placeholder="请选择生效时段">
    <el-option v-for="item in dailyRoles" :key="item.key" :label="item.label" :value="item.key"></el-option>
  </el-select>
</template>

<script>
/**
 * h-select-daily
 * @module common/h-select-daily
 * @desc 一天内的日期选择控件
 *
 * @param { array } value - 已选中的时间，:value.sync绑定
 */
export default {
  name: 'h-select-daily',
  componentName: 'h-select-daily',
  data () {
    return {
      dailyRoles: []
    }
  },
  props: {
    value: Array
  },
  computed: {
    _value: {
      get () {
        return this.value
      },
      set (val) {
        let sequence = (a, b) => {
          return a - b
        }
        let value = val.sort(sequence)
        this.$emit('update:value', value)
        this.$emit('change', value)
      }
    }
  },
  methods: {
    setDailyRoles () {
      let i = 0
      let tmp = []
      while (i < 24) {
        tmp.push({
          key: i,
          label: i + '点 - ' + (i + 1) + '点'
        })
        i++
      }
      this.dailyRoles = tmp
    }
  },
  created () {
    this.setDailyRoles()
  }
}
</script>
